<template>
    <div class="slide" ref="slide">
        <ul class="slide-wrapper"  ref="slideWrapper">
            <!--//li 的盒子 嵌套img 图片-->
          <slot></slot>
        </ul>
        <div class="bannerDots" >
            <div
            v-for="(item,index) in bannersData" :key="index"
            :class="{dots:true,dotActive:index===currentPageIndex}">

            </div>
        </div>
    </div>
</template>

<script>
    import BScroll from '@better-scroll/core'
    import Slide from '@better-scroll/slide'

    BScroll.use(Slide)
export default {
    data () {
      return {
      slide:null,
          currentPageIndex:0
      }
    },
    props:['bannersData'],
    methods: {
       init() {
           //必须在slide对象拿来做bscroll  要引用
           //初始化 better-scroll
           this.slide = new BScroll(this.$refs.slide, {
               scrollX: true,
               scrollY: false,
               slide: {
                   loop: true,
                   threshold: 100
               },
               useTransition: true,
               momentum: false,
               bounce: false,
               stopPropagation: true,
               probeType: 2
           })
           //设置slide-item的样式
           this.children=this.$refs.slideWrapper.children;
           console.log(this.children);
           for (let i=0;i<this.children.length;i++){
               this.children[i].classList.add('slide-item')
           }
           this.autoGoNext();
           this.slide.on('scrollEnd',()=>{
               //检测如果滚动就触发回调函数
               // console.log('scrollEnd');
               this.autoGoNext()
           });
           this.slide.on('beforeScrollStart',()=>{
               clearTimeout(this.playTimer)
           });
           this.slide.on('touchEnd',()=>{
               this.autoGoNext();
           });
           this.slide.on('slideWillChange', (page) => {
               this.currentPageIndex = page.pageX
           })
       },
        //L轮播功能
        nextPage() {
            this.slide.next()
        },
        autoGoNext() {
            clearTimeout(this.playTimer)
            this.playTimer = setTimeout(() => {
                this.nextPage()
            }, 1000)
        }


    },
    watch:{
        bannersData:function () {
            setTimeout(()=>{
                this.init()
            },20)

        }
    }
    }

</script>

<style scoped>
.slide{
    width:100%;
    overflow: hidden;
}

.slide-item{
    width: 100%;
    float: left;

}
.slide-item img{
    width: 100%;
    display: block;
}
    .bannerDots{
        position: relative;
        bottom: 18px;
        left: 80%;
        transform: translateX(-50%);
    }
     .dots{
        width: 8px;;
        height: 8px;
        border-radius: 50%;
        background: gray;
        float: left;
        margin-right: 8px;
    }

    .dotActive{
        background: red;
    }
</style>